<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条码在线生成工具</title>
    <link rel="stylesheet" href="../coding/common.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>
    <style>
        /* 基础样式和变量 */
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6c8ebd;
            --background-color: #f5f7fa;
            --card-background: #ffffff;
            --text-color: #333333;
            --border-color: #e0e0e0;
            --error-color: #e74c3c;
            --success-color: #2ecc71;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --tip-background: #e3f2fd;
            --tab-active: #4a6fa5;
            --tab-inactive: #f8f9fa;
        }

        /* 暗黑模式变量 */
        [data-theme="dark"] {
            --primary-color: #5b8ad6;
            --secondary-color: #7fa3d7;
            --background-color: #1a1a2e;
            --card-background: #222438;
            --text-color: #e0e0e0;
            --border-color: #444444;
            --shadow-color: rgba(0, 0, 0, 0.3);
            --tip-background: #1a2a3a;
            --tab-active: #5b8ad6;
            --tab-inactive: #2a2a3e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        header h1 {
            font-size: 2rem;
            color: var(--primary-color);
        }

        /* 头部控件区域 */
        .header-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 分享按钮 */
        .share-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 2px 6px;
            background-color: var(--secondary-color);
            color: white;
            border-radius: 15px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.1s;
        }

        .share-button:hover {
            background-color: var(--primary-color);
        }

        .share-button:active {
            transform: scale(0.98);
        }

        .share-button i {
            font-size: 16px;
        }

        /* 主题切换开关 */
        .theme-toggle {
            position: relative;
        }

        .theme-switch {
            opacity: 0;
            position: absolute;
        }

        .theme-switch-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            width: 50px;
            height: 26px;
            background-color: #83d8ff;
            border-radius: 100px;
            position: relative;
            transition: background-color 0.3s;
            padding: 0 5px;
        }

        .theme-switch:checked + .theme-switch-label {
            background-color: #4a4e69;
        }

        .theme-switch-label .fa-sun {
            color: #f39c12;
        }

        .theme-switch-label .fa-moon {
            color: #f1c40f;
        }

        .theme-switch-label .slider {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            transition: 0.3s;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            left: 2px;
        }

        .theme-switch:checked + .theme-switch-label .slider {
            transform: translateX(24px);
        }

        /* 隐私提示框样式 */
        .privacy-notice {
            margin-bottom: 20px;
            animation: fadeIn 0.5s ease-in-out;
        }

        .privacy-notice-content {
            display: flex;
            align-items: center;
            background-color: var(--tip-background);
            border-left: 4px solid #2196f3;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .privacy-notice-content i.fa-shield-alt {
            font-size: 20px;
            color: #2196f3;
            margin-right: 15px;
        }

        .privacy-notice-content p {
            flex: 1;
            margin: 0;
            font-size: 14px;
            color: var(--text-color);
        }

        .close-notice {
            background: none;
            border: none;
            color: #90a4ae;
            cursor: pointer;
            font-size: 16px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }

        .close-notice:hover {
            color: #546e7a;
            background: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Tab 样式 */
        .tab-container {
            margin-bottom: 20px;
        }

        .tab-buttons {
            display: flex;
            border-bottom: none;
        }

        .tab-button {
            padding: 12px 24px;
            background-color: var(--tab-inactive);
            border: 1px solid var(--border-color);
            border-bottom: none;
            cursor: pointer;
            transition: background-color 0.3s;
            color: var(--text-color);
            font-size: 14px;
        }

        .tab-button:first-child {
            border-radius: 8px 0 0 0;
        }

        .tab-button:last-child {
            border-radius: 0 8px 0 0;
        }

        .tab-button.active {
            background-color: var(--tab-active);
            color: white;
            border-color: var(--tab-active);
        }

        .tab-content {
            display: none;
            background-color: var(--card-background);
            border: 1px solid var(--border-color);
            border-radius: 0 8px 8px 8px;
            padding: 20px;
            box-shadow: 0 4px 6px var(--shadow-color);
        }

        .tab-content.active {
            display: block;
        }

        /* 主内容区域 */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .barcode-container {
            display: flex;
            gap: 20px;
        }

        .settings-panel {
            flex: 1;
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 20px;
        }

        .preview-panel {
            flex: 1;
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 400px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--card-background);
            color: var(--text-color);
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .form-row {
            display: flex;
            gap: 15px;
        }

        .form-row .form-group {
            flex: 1;
        }

        /* 滑块样式 */
        .slider-group {
            margin-bottom: 20px;
        }

        .slider-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .slider {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: var(--border-color);
            outline: none;
            -webkit-appearance: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            border: none;
        }

        .slider-value {
            min-width: 40px;
            text-align: center;
            font-weight: 500;
            color: var(--primary-color);
        }

        /* 字体样式行布局 */
        .font-family-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 10px;
        }

        .font-family-row select {
            width: 150px;
            flex-shrink: 0;
        }

        /* 字体样式按钮 */
        .font-style-group {
            display: flex;
            gap: 10px;
            margin-top: 0;
        }

        .font-style-btn {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            background-color: var(--card-background);
            color: var(--text-color);
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            font-weight: bold;
        }

        .font-style-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .font-style-btn:hover {
            background-color: var(--secondary-color);
            color: white;
        }

        /* 字体位置按钮 */
        .position-group {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .position-btn {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            background-color: var(--card-background);
            color: var(--text-color);
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .position-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .position-btn:hover {
            background-color: var(--secondary-color);
            color: white;
        }

        /* 颜色设置 */
        .color-group {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-top: 10px;
        }

        .color-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .color-picker {
            width: 40px !important;
            height: 30px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            background: none;
            padding: 0 !important;
        }

        .reset-colors {
            padding: 6px 12px;
            background-color: var(--error-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
        }

        .reset-colors:hover {
            background-color: #c0392b;
        }

        /* 按钮样式 */
        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        
        .download-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .download-group select {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--card-background);
            color: var(--text-color);
            font-size: 14px;
            transition: border-color 0.3s;
            width: 80px;
        }
        
        .download-group select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            background-color: var(--primary-color);
            color: white;
            cursor: pointer;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s, transform 0.1s;
        }

        .btn:hover {
            background-color: var(--secondary-color);
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn.secondary {
            background-color: var(--secondary-color);
        }

        .btn.success {
            background-color: var(--success-color);
        }

        .btn.success:hover {
            background-color: #27ae60;
        }

        /* 条码预览 */
        .barcode-preview {
            max-width: 100%;
            max-height: 300px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            margin-bottom: 20px;
        }

        .barcode-text {
            margin-top: 10px;
            font-family: monospace;
            font-size: 14px;
            color: var(--text-color);
        }

        /* 批量生成样式 */
        .batch-input {
            height: 200px;
            resize: vertical;
        }

        .batch-preview {
            max-height: 800px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 15px;
        }

        .batch-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            padding: 10px;
            background-color: var(--tip-background);
            border-radius: 4px;
        }

        .batch-item svg {
            max-width: 400px;
            height: auto;
        }

        /* 通知样式 */
        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--success-color);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transform: translateY(100px);
            opacity: 0;
            transition: transform 0.3s, opacity 0.3s;
        }

        .notification.show {
            transform: translateY(0);
            opacity: 1;
        }

        .notification.error {
            background-color: var(--error-color);
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .barcode-container {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .privacy-notice-content {
                flex-direction: column;
                text-align: center;
                padding: 15px 10px;
            }
            
            .privacy-notice-content i.fa-shield-alt {
                margin-right: 0;
                margin-bottom: 10px;
            }
            
            .close-notice {
                position: absolute;
                top: 5px;
                right: 5px;
            }

            header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .form-row {
                flex-direction: column;
            }

            .font-style-group,
            .position-group {
                flex-wrap: wrap;
            }

            .color-group {
                flex-direction: column;
                align-items: flex-start;
            }

            .button-group {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="header-left">
                <div class="logo">
                    <span><a href="https://geekdaxue.co/" target="_blank"><img src="https://geekdaxue.co/static/images/logo_platypus.png" height="30px"></a></span>
                </div>
                <nav class="main-navigation">
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            JSON工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../json/index.html">JSON 格式化</a>
                            <a href="../json/parser.html">JSON 格式校验</a>
                            <a href="../json/excel.html">JSON 转 Excel/CSV</a>
                            <a href="../json/jsonxml.html">JSON 与 XML 转换</a>
                            <a href="../json/editor.html">JSON 编辑器</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            编码转换 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../coding/base64.html">Base64 编码</a>
                            <a href="../coding/urlencoding.html">URL 编码</a>
                            <a href="../coding/md5.html">MD5 加密</a>
                            <a href="../coding/unicode.html">Unicode 转换</a>
                            <a href="../coding/hex_convert.html">进制转换</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            文本工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../txt/diff.html">文本对比</a>
                            <a href="../txt/replace.html">文本替换</a>
                            <a href="../txt/remove.html">空白行移除</a>
                            <a href="../txt/cn_trans.html">繁简体转换</a>
                        </div>
                    </div>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link">
                            图片工具 <i class="fas fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="../img/2svg.html">图片转 SVG</a>
                            <a href="../img/qr_code.html">二维码生成</a>
                            <a href="../img/barcode.html">条形码生成</a>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="header-controls">
                <div class="theme-toggle">
                    <input type="checkbox" id="theme-switch" class="theme-switch">
                    <label for="theme-switch" class="theme-switch-label">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="share-button" id="share-button" title="分享给朋友">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div id="privacy-notice" class="privacy-notice">
            <div class="privacy-notice-content">
                <i class="fas fa-shield-alt"></i>
                <p>安全提示：您的数据仅在本地浏览器中处理，不会上传到服务器，请放心使用！</p>
                <button id="close-notice" class="close-notice" title="关闭提示">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        
        <main>
            <div class="tab-container">
                <div class="tab-buttons">
                    <div class="tab-button active" data-tab="single">条码生成</div>
                    <div class="tab-button" data-tab="batch">批量生成条码</div>
                </div>
                
                <!-- 单个条码生成 -->
                <div id="single-tab" class="tab-content active">
                    <div class="barcode-container">
                        <div class="settings-panel">
                            <h3 style="margin-bottom: 20px; color: var(--primary-color);"><i class="fas fa-cog"></i> 条码设置</h3>
                            
                            <div class="form-group">
                                <label for="barcode-text">条码内容</label>
                                <input type="text" id="barcode-text" placeholder="请输入要生成条码的内容" value="1234567890ABC">
                                <small style="color: #999; font-size: 12px;">⚠ 不同条码类型对内容格式有不一样的要求，对数据格式不对的会导致无法生成</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="barcode-type">条码类型</label>
                                <select id="barcode-type">
                                    <option value="CODE128">CODE128(常用)</option>
                                    <option value="CODE39">CODE39</option>
                                    <option value="EAN13">EAN13</option>
                                    <option value="EAN8">EAN8</option>
                                    <option value="UPC">UPC</option>
                                    <option value="ITF14">ITF14</option>
                                    <option value="MSI">MSI</option>
                                    <option value="pharmacode">Pharmacode</option>
                                </select>
                            </div>
                            
                            <div class="slider-group">
                                <label>条码宽度</label>
                                <div class="slider-container">
                                    <input type="range" id="barcode-width" class="slider" min="1" max="5" step="0.1" value="2">
                                    <span id="width-value" class="slider-value">2</span>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>条码高度</label>
                                <div class="slider-container">
                                    <input type="range" id="barcode-height" class="slider" min="20" max="200" step="5" value="100">
                                    <span id="height-value" class="slider-value">100</span>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>二维码边距</label>
                                <div class="slider-container">
                                    <input type="range" id="barcode-margin" class="slider" min="0" max="50" step="1" value="10">
                                    <span id="margin-value" class="slider-value">10</span>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>字体大小</label>
                                <div class="slider-container">
                                    <input type="range" id="font-size" class="slider" min="8" max="32" step="1" value="14">
                                    <span id="font-size-value" class="slider-value">14</span>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>字体样式</label>
                                <div class="font-family-row">
                                    <select id="font-family">
                                        <option value="monospace">monospace</option>
                                        <option value="Arial">Arial</option>
                                        <option value="Helvetica">Helvetica</option>
                                        <option value="Times">Times</option>
                                        <option value="Courier">Courier</option>
                                    </select>
                                    <div class="font-style-group">
                                        <button type="button" class="font-style-btn active" data-style="bold"><strong>B</strong></button>
                                        <button type="button" class="font-style-btn" data-style="italic"><em>I</em></button>
                                        <button type="button" class="font-style-btn" data-style="normal" id="display-toggle">隐藏</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>字体位置</label>
                                <div class="position-group">
                                    <button type="button" class="position-btn" data-position="top"><i class="fas fa-arrow-up"></i> 上</button>
                                    <button type="button" class="position-btn active" data-position="bottom"><i class="fas fa-arrow-down"></i> 下</button>
                                    <button type="button" class="position-btn" data-position="left"><i class="fas fa-align-left"></i> 左对齐</button>
                                    <button type="button" class="position-btn active" data-position="center"><i class="fas fa-align-center"></i> 居中</button>
                                    <button type="button" class="position-btn" data-position="right"><i class="fas fa-align-right"></i> 右对齐</button>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>字体边距</label>
                                <div class="slider-container">
                                    <input type="range" id="text-margin" class="slider" min="0" max="20" step="1" value="2">
                                    <span id="text-margin-value" class="slider-value">2</span>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>颜色设置</label>
                                <div class="color-group">
                                    <div class="color-item">
                                        <input type="color" id="barcode-color" class="color-picker" value="#000000">
                                        <span>条形码</span>
                                    </div>
                                    <div class="color-item">
                                        <input type="color" id="background-color" class="color-picker" value="#ffffff">
                                        <span>背景色</span>
                                    </div>
                                    <button type="button" class="reset-colors">重置</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="preview-panel">
                            <h3 style="margin-bottom: 20px; color: var(--primary-color);"><i class="fas fa-eye"></i> 条码预览</h3>
                            <div id="barcode-preview">
                                <svg id="barcode-svg"></svg>
                            </div>
                            <!-- <div class="barcode-text" id="barcode-display-text">1234567890ABC</div> -->
                            
                            <div class="button-group">
                                <button class="btn" id="download-png">
                                    <i class="fas fa-download"></i> 下载为图片
                                </button>
                                <button class="btn secondary" id="download-svg">
                                    <i class="fas fa-file-code"></i> 下载为矢量图
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 批量生成 -->
                <div id="batch-tab" class="tab-content">
                    <div class="barcode-container">
                        <div class="settings-panel">
                            <h3 style="margin-bottom: 20px; color: var(--primary-color);"><i class="fas fa-list"></i> 批量设置</h3>
                            
                            <div class="form-group">
                                <label for="batch-text">批量内容（每行一个）</label>
                                <textarea id="batch-text" class="batch-input" placeholder="请输入要生成条码的内容，每行一个\n例如：\n1234567890\nABCDEFGHIJ\n9876543210"></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="batch-barcode-type">条码类型</label>
                                <select id="batch-barcode-type">
                                    <option value="CODE128">CODE128(常用)</option>
                                    <option value="CODE39">CODE39</option>
                                    <option value="EAN13">EAN13</option>
                                    <option value="EAN8">EAN8</option>
                                    <option value="UPC">UPC</option>
                                    <option value="ITF14">ITF14</option>
                                    <option value="MSI">MSI</option>
                                    <option value="pharmacode">Pharmacode</option>
                                </select>
                            </div>
                            
                            <div class="slider-group">
                                <label>条码宽度</label>
                                <div class="slider-container">
                                    <input type="range" id="batch-barcode-width" class="slider" min="1" max="5" step="0.1" value="2">
                                    <span id="batch-width-value" class="slider-value">2</span>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>条码高度</label>
                                <div class="slider-container">
                                    <input type="range" id="batch-barcode-height" class="slider" min="20" max="200" step="5" value="100">
                                    <span id="batch-height-value" class="slider-value">100</span>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>二维码边距</label>
                                <div class="slider-container">
                                    <input type="range" id="batch-barcode-margin" class="slider" min="0" max="50" step="1" value="10">
                                    <span id="batch-margin-value" class="slider-value">10</span>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>字体大小</label>
                                <div class="slider-container">
                                    <input type="range" id="batch-font-size" class="slider" min="8" max="32" step="1" value="14">
                                    <span id="batch-font-size-value" class="slider-value">14</span>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>字体样式</label>
                                <div class="font-family-row">
                                    <select id="batch-font-family">
                                        <option value="monospace">monospace</option>
                                        <option value="Arial">Arial</option>
                                        <option value="Helvetica">Helvetica</option>
                                        <option value="Times">Times</option>
                                        <option value="Courier">Courier</option>
                                    </select>
                                    <div class="font-style-group">
                                        <button type="button" class="font-style-btn active" data-style="bold"><strong>B</strong></button>
                                        <button type="button" class="font-style-btn" data-style="italic"><em>I</em></button>
                                        <button type="button" class="font-style-btn" data-style="normal" id="batch-display-toggle">隐藏</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>字体位置</label>
                                <div class="position-group">
                                    <button type="button" class="position-btn" data-position="top"><i class="fas fa-arrow-up"></i> 上</button>
                                    <button type="button" class="position-btn active" data-position="bottom"><i class="fas fa-arrow-down"></i> 下</button>
                                    <button type="button" class="position-btn" data-position="left"><i class="fas fa-align-left"></i> 左对齐</button>
                                    <button type="button" class="position-btn active" data-position="center"><i class="fas fa-align-center"></i> 居中</button>
                                    <button type="button" class="position-btn" data-position="right"><i class="fas fa-align-right"></i> 右对齐</button>
                                </div>
                            </div>
                            
                            <div class="slider-group">
                                <label>字体边距</label>
                                <div class="slider-container">
                                    <input type="range" id="batch-text-margin" class="slider" min="0" max="20" step="1" value="2">
                                    <span id="batch-text-margin-value" class="slider-value">2</span>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>颜色设置</label>
                                <div class="color-group">
                                    <div class="color-item">
                                        <input type="color" id="batch-barcode-color" class="color-picker" value="#000000">
                                        <span>条形码</span>
                                    </div>
                                    <div class="color-item">
                                        <input type="color" id="batch-background-color" class="color-picker" value="#ffffff">
                                        <span>背景色</span>
                                    </div>
                                    <button type="button" class="reset-colors">重置</button>
                                </div>
                            </div>
                            
                            <div class="button-group">
                                <button class="btn" id="generate-batch">
                                    <i class="fas fa-magic"></i> 批量生成
                                </button>
                                <div class="download-group" id="download-group" style="display: none;">
                                    <select id="batch-download-format">
                                        <option value="png">PNG</option>
                                        <option value="svg">SVG</option>
                                    </select>
                                    <button class="btn success" id="download-batch">
                                        <i class="fas fa-download"></i> 下载全部
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="preview-panel">
                            <h3 style="margin-bottom: 20px; color: var(--primary-color);"><i class="fas fa-images"></i> 批量预览</h3>
                            <div id="batch-preview" class="batch-preview">
                                <p style="color: #999; text-align: center;">请在左侧输入内容并点击"批量生成"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <footer>
            <div class="footer-container">
                <div class="footer-main">
                    <div class="footer-section about-us">
                        <h3>关于我们</h3>
                        <p>我们提供一系列高效、便捷的在线工具，帮助开发者、非技术人员提高工作效率，解决日常开发中遇到的各种问题。</p>
                        <p>Build With <i class="fa-solid fa-heart" style="color: red;"></i> For SF.</p>
                    </div>
                    <div class="footer-section links">
                        <h3>工具导航</h3>
                        <div class="links-columns">
                            <ul>
                                <li><a href="../json/index.html">JSON 工具</a></li>
                                <li><a href="../img/index.html">图片处理</a></li>
                                <li><a href="#">开发工具</a></li>
                            </ul>
                            <ul>
                                <li><a href="../coding/index.html">编码转换</a></li>
                                <li><a href="../txt/index.html">文本工具</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-section contact">
                        <h3>联系我们</h3>
                        <div class="social-icons">
                            <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
                            <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" title="WeChat"><i class="fab fa-weixin"></i></a>
                            <a href="mailto:example@example.com" title="Email"><i class="fas fa-envelope"></i></a>
                        </div>
                        <p>如有问题或建议，请随时联系我们</p>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="footer-legal">
                        <a href="#">使用条款</a>
                        <a href="#">隐私政策</a>
                    </div>
                </div>
            </div>
        </footer>
    
    <div id="notification" class="notification"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const themeSwitch = document.getElementById('theme-switch');
            const privacyNotice = document.getElementById('privacy-notice');
            const closeNoticeBtn = document.getElementById('close-notice');
            const shareButton = document.getElementById('share-button');
            const notification = document.getElementById('notification');
            
            // Tab相关元素
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            
            // 单个条码生成相关元素
            const barcodeText = document.getElementById('barcode-text');
            const barcodeType = document.getElementById('barcode-type');
            const barcodeWidth = document.getElementById('barcode-width');
            const barcodeHeight = document.getElementById('barcode-height');
            const barcodeMargin = document.getElementById('barcode-margin');
            const fontSize = document.getElementById('font-size');
            const fontFamily = document.getElementById('font-family');
            const textMargin = document.getElementById('text-margin');
            const barcodeColor = document.getElementById('barcode-color');
            const backgroundColor = document.getElementById('background-color');

            const resetColors = document.querySelector('.reset-colors');
            const barcodeSvg = document.getElementById('barcode-svg');
            // const barcodeDisplayText = document.getElementById('barcode-display-text');
            const downloadPng = document.getElementById('download-png');
            const downloadSvg = document.getElementById('download-svg');
            
            // 滑块值显示元素
            const widthValue = document.getElementById('width-value');
            const heightValue = document.getElementById('height-value');
            const marginValue = document.getElementById('margin-value');
            const fontSizeValue = document.getElementById('font-size-value');
            const textMarginValue = document.getElementById('text-margin-value');
            
            // 字体样式和位置按钮
            const fontStyleBtns = document.querySelectorAll('.font-style-btn');
            const positionBtns = document.querySelectorAll('.position-btn');
            const displayToggle = document.getElementById('display-toggle');
            
            // 批量生成相关元素
            const batchText = document.getElementById('batch-text');
            const generateBatch = document.getElementById('generate-batch');
            const downloadBatch = document.getElementById('download-batch');
            const downloadGroup = document.getElementById('download-group');
            const batchDownloadFormat = document.getElementById('batch-download-format');
            const batchPreview = document.getElementById('batch-preview');
            
            // 批量生成配置项元素
            const batchBarcodeType = document.getElementById('batch-barcode-type');
            const batchBarcodeWidth = document.getElementById('batch-barcode-width');
            const batchBarcodeHeight = document.getElementById('batch-barcode-height');
            const batchBarcodeMargin = document.getElementById('batch-barcode-margin');
            const batchFontSize = document.getElementById('batch-font-size');
            const batchFontFamily = document.getElementById('batch-font-family');
            const batchTextMargin = document.getElementById('batch-text-margin');
            const batchBarcodeColor = document.getElementById('batch-barcode-color');
            const batchBackgroundColor = document.getElementById('batch-background-color');
            const batchResetColors = document.querySelector('#batch-tab .reset-colors');
            
            // 批量生成配置项值显示元素
            const batchWidthValue = document.getElementById('batch-width-value');
            const batchHeightValue = document.getElementById('batch-height-value');
            const batchMarginValue = document.getElementById('batch-margin-value');
            const batchFontSizeValue = document.getElementById('batch-font-size-value');
            const batchTextMarginValue = document.getElementById('batch-text-margin-value');
            
            // 批量生成字体样式和位置按钮
            const batchFontStyleBtns = document.querySelectorAll('#batch-tab .font-style-btn');
            const batchPositionBtns = document.querySelectorAll('#batch-tab .position-btn');
            
            // 批量生成状态变量
            let batchIsBold = true;
            let batchIsItalic = false;
            let batchShowText = true;
            let batchCurrentPosition = 'bottom';
            let batchCurrentTextAlign = 'center';
            
            function getBatchCurrentFontStyle() {
                if (batchIsBold && batchIsItalic) {
                    return 'bold italic';
                } else if (batchIsBold) {
                    return 'bold';
                } else if (batchIsItalic) {
                    return 'italic';
                } else {
                    return 'normal';
                }
            }
            
            let isBold = true;
            let isItalic = false;
            
            function getCurrentFontStyle() {
                if (isBold && isItalic) {
                    return 'bold italic';
                } else if (isBold) {
                    return 'bold';
                } else if (isItalic) {
                    return 'italic';
                } else {
                    return 'normal';
                }
            }
            let currentPosition = 'bottom';
            let currentTextAlign = 'center'; // 文字水平对齐方式
            let batchBarcodes = [];
            let showText = true; // 控制条码文字显示，默认显示
            
            // 检查本地存储中的主题设置
            if (localStorage.getItem('theme') === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
                themeSwitch.checked = true;
            }
            
            // 主题切换功能
            themeSwitch.addEventListener('change', function() {
                if (this.checked) {
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                } else {
                    document.documentElement.removeAttribute('data-theme');
                    localStorage.setItem('theme', 'light');
                }
            });
            
            // 隐私提示框关闭功能
            closeNoticeBtn.addEventListener('click', function() {
                privacyNotice.style.display = 'none';
                localStorage.setItem('privacyNoticeClosed', 'true');
            });
            
            // 检查是否需要显示隐私提示
            if (localStorage.getItem('privacyNoticeClosed') === 'true') {
                privacyNotice.style.display = 'none';
            }
            
            // 分享功能
            shareButton.addEventListener('click', function() {
                const url = window.location.href;
                navigator.clipboard.writeText(url).then(() => {
                    showNotification('已复制网址，赶快让更多的小伙伴知道我吧！');
                }).catch(() => {
                    showNotification('复制失败，请手动复制网址', true);
                });
            });
            
            // 显示通知
            function showNotification(message, isError = false) {
                notification.textContent = message;
                notification.className = 'notification show' + (isError ? ' error' : '');
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 3000);
            }
            
            // Tab切换功能
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetTab = this.dataset.tab;
                    
                    // 更新按钮状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新内容显示
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        if (content.id === targetTab + '-tab') {
                            content.classList.add('active');
                        }
                    });
                });
            });
            
            // 滑块值更新
            barcodeWidth.addEventListener('input', function() {
                widthValue.textContent = this.value;
                generateBarcode();
            });
            
            barcodeHeight.addEventListener('input', function() {
                heightValue.textContent = this.value;
                generateBarcode();
            });
            
            barcodeMargin.addEventListener('input', function() {
                marginValue.textContent = this.value;
                generateBarcode();
            });
            
            fontSize.addEventListener('input', function() {
                fontSizeValue.textContent = this.value;
                generateBarcode();
            });
            
            textMargin.addEventListener('input', function() {
                textMarginValue.textContent = this.value;
                generateBarcode();
            });
            
            // 字体样式按钮
            fontStyleBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if (this.id === 'display-toggle') {
                        console.log(this.textContent);
                        // 切换显示/隐藏文案和状态
                        if (this.textContent === '隐藏') {
                            this.textContent = '显示';
                            showText = false;
                        } else {
                            this.textContent = '隐藏';
                            showText = true;
                        }
                        generateBarcode();
                        return;
                    }
                    
                    // B和I按钮可以独立切换
                    if (this.dataset.style === 'bold') {
                        if (this.classList.contains('active')) {
                            this.classList.remove('active');
                            isBold = false;
                        } else {
                            this.classList.add('active');
                            isBold = true;
                        }
                    } else if (this.dataset.style === 'italic') {
                        if (this.classList.contains('active')) {
                            this.classList.remove('active');
                            isItalic = false;
                        } else {
                            this.classList.add('active');
                            isItalic = true;
                        }
                    }
                    generateBarcode();
                });
            });
            
            // 字体位置按钮
            positionBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const position = this.dataset.position;
                    
                    // 区分垂直位置和水平对齐，分别控制选中状态
                    if (position === 'top' || position === 'bottom') {
                        // 垂直位置组：移除同组其他按钮的active状态
                        positionBtns.forEach(b => {
                            if (b.dataset.position === 'top' || b.dataset.position === 'bottom') {
                                b.classList.remove('active');
                            }
                        });
                        this.classList.add('active');
                        currentPosition = position;
                    } else if (position === 'left' || position === 'center' || position === 'right') {
                        // 水平对齐组：移除同组其他按钮的active状态
                        positionBtns.forEach(b => {
                            if (b.dataset.position === 'left' || b.dataset.position === 'center' || b.dataset.position === 'right') {
                                b.classList.remove('active');
                            }
                        });
                        this.classList.add('active');
                        currentTextAlign = position;
                    }
                    
                    generateBarcode();
                });
            });
            
            // 颜色重置
            resetColors.addEventListener('click', function() {
                barcodeColor.value = '#000000';
                backgroundColor.value = '#ffffff';
                generateBarcode();
            });
            
            // 生成条码函数
            function generateBarcode() {
                try {
                    const text = barcodeText.value || '1234567890ABC';
                    const type = barcodeType.value;
                    const width = parseFloat(barcodeWidth.value);
                    const height = parseInt(barcodeHeight.value);
                    const margin = parseInt(barcodeMargin.value);
                    const fontSizeVal = parseInt(fontSize.value);
                    const fontFamilyVal = fontFamily.value;
                    const textMarginVal = parseInt(textMargin.value);
                    const lineColor = barcodeColor.value;
                    const bgColor = backgroundColor.value;
                    
                    // 更新显示文本
                    // barcodeDisplayText.textContent = text;
                    
                    // 生成条码
                    JsBarcode(barcodeSvg, text, {
                        format: type,
                        width: width,
                        height: height,
                        margin: margin,
                        fontSize: fontSizeVal,
                        fontOptions: getCurrentFontStyle(),
                        font: fontFamilyVal,
                        textPosition: currentPosition,
                        textAlign: currentTextAlign,
                        textMargin: textMarginVal,
                        lineColor: lineColor,
                        background: bgColor,
                        displayValue: showText
                    });
                    
                } catch (error) {
                    console.error('生成条码失败:', error);
                    showNotification('生成条码失败，请检查输入内容是否符合所选条码类型的要求', true);
                }
            }
            
            // 下载PNG图片
            downloadPng.addEventListener('click', function() {
                try {
                    const svgElement = barcodeSvg;
                    const svgData = new XMLSerializer().serializeToString(svgElement);
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    const img = new Image();
                    
                    img.onload = function() {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                        
                        const link = document.createElement('a');
                        link.download = `barcode_${barcodeText.value || 'generated'}.png`;
                        link.href = canvas.toDataURL('image/png');
                        link.click();
                        
                        showNotification('PNG图片下载成功！');
                    };
                    
                    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
                } catch (error) {
                    console.error('下载失败:', error);
                    showNotification('下载失败，请重试', true);
                }
            });
            
            // 下载SVG矢量图
            downloadSvg.addEventListener('click', function() {
                try {
                    const svgElement = barcodeSvg;
                    const svgData = new XMLSerializer().serializeToString(svgElement);
                    const blob = new Blob([svgData], { type: 'image/svg+xml' });
                    const url = URL.createObjectURL(blob);
                    
                    const link = document.createElement('a');
                    link.download = `barcode_${barcodeText.value || 'generated'}.svg`;
                    link.href = url;
                    link.click();
                    
                    URL.revokeObjectURL(url);
                    showNotification('SVG矢量图下载成功！');
                } catch (error) {
                    console.error('下载失败:', error);
                    showNotification('下载失败，请重试', true);
                }
            });
            
            // 批量生成配置项事件监听器
            // 滑块值更新
            batchBarcodeWidth.addEventListener('input', function() {
                batchWidthValue.textContent = this.value;
            });
            
            batchBarcodeHeight.addEventListener('input', function() {
                batchHeightValue.textContent = this.value;
            });
            
            batchBarcodeMargin.addEventListener('input', function() {
                batchMarginValue.textContent = this.value;
            });
            
            batchFontSize.addEventListener('input', function() {
                batchFontSizeValue.textContent = this.value;
            });
            
            batchTextMargin.addEventListener('input', function() {
                batchTextMarginValue.textContent = this.value;
            });
            
            // 批量字体样式按钮
            batchFontStyleBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if (this.id === 'batch-display-toggle') {
                        // 切换显示/隐藏文案和状态
                        if (this.textContent === '隐藏') {
                            this.textContent = '显示';
                            batchShowText = false;
                        } else {
                            this.textContent = '隐藏';
                            batchShowText = true;
                        }
                        return;
                    }
                    
                    // B和I按钮可以独立切换
                    if (this.dataset.style === 'bold') {
                        if (this.classList.contains('active')) {
                            this.classList.remove('active');
                            batchIsBold = false;
                        } else {
                            this.classList.add('active');
                            batchIsBold = true;
                        }
                    } else if (this.dataset.style === 'italic') {
                        if (this.classList.contains('active')) {
                            this.classList.remove('active');
                            batchIsItalic = false;
                        } else {
                            this.classList.add('active');
                            batchIsItalic = true;
                        }
                    }
                });
            });
            
            // 批量字体位置按钮
            batchPositionBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const position = this.dataset.position;
                    
                    if (['top', 'bottom'].includes(position)) {
                        // 垂直位置按钮
                        batchPositionBtns.forEach(b => {
                            if (['top', 'bottom'].includes(b.dataset.position)) {
                                b.classList.remove('active');
                            }
                        });
                        this.classList.add('active');
                        batchCurrentPosition = position;
                    } else if (['left', 'center', 'right'].includes(position)) {
                        // 水平对齐按钮
                        batchPositionBtns.forEach(b => {
                            if (['left', 'center', 'right'].includes(b.dataset.position)) {
                                b.classList.remove('active');
                            }
                        });
                        this.classList.add('active');
                        batchCurrentTextAlign = position;
                    }
                });
            });
            
            // 批量颜色重置按钮
            batchResetColors.addEventListener('click', function() {
                batchBarcodeColor.value = '#000000';
                batchBackgroundColor.value = '#ffffff';
            });
            
            // 批量生成条码
            generateBatch.addEventListener('click', function() {
                const texts = batchText.value.split('\n').filter(text => text.trim());
                if (texts.length === 0) {
                    showNotification('请输入要生成的条码内容', true);
                    return;
                }
                
                batchBarcodes = [];
                batchPreview.innerHTML = '';
                
                texts.forEach((text, index) => {
                    try {
                        const container = document.createElement('div');
                        container.className = 'batch-item';
                        
                        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                        // const textSpan = document.createElement('span');
                        // textSpan.textContent = text.trim();
                        // textSpan.style.fontFamily = 'monospace';
                        // textSpan.style.fontSize = '14px';
                        
                        JsBarcode(svg, text.trim(), {
                            format: batchBarcodeType.value,
                            width: parseFloat(batchBarcodeWidth.value),
                            height: parseInt(batchBarcodeHeight.value),
                            margin: parseInt(batchBarcodeMargin.value),
                            fontSize: parseInt(batchFontSize.value),
                            fontOptions: getBatchCurrentFontStyle(),
                            font: batchFontFamily.value,
                            textPosition: batchCurrentPosition,
                            textAlign: batchCurrentTextAlign,
                            textMargin: parseInt(batchTextMargin.value),
                            lineColor: batchBarcodeColor.value,
                            background: batchBackgroundColor.value,
                            displayValue: batchShowText
                        });
                        
                        container.appendChild(svg);
                        // container.appendChild(textSpan);
                        batchPreview.appendChild(container);
                        
                        batchBarcodes.push({
                            text: text.trim(),
                            svg: svg
                        });
                        
                    } catch (error) {
                        console.error(`生成条码失败 (${text}):`, error);
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'batch-item';
                        errorDiv.style.color = 'var(--error-color)';
                        errorDiv.innerHTML = `<i class="fas fa-exclamation-triangle"></i> 生成失败: ${text.trim()}`;
                        batchPreview.appendChild(errorDiv);
                    }
                });
                
                if (batchBarcodes.length > 0) {
                    downloadGroup.style.display = 'flex';
                    showNotification(`成功生成 ${batchBarcodes.length} 个条码！`);
                } else {
                    showNotification('没有成功生成任何条码，请检查输入内容', true);
                }
            });
            
            // 批量下载
            downloadBatch.addEventListener('click', function() {
                if (batchBarcodes.length === 0) {
                    showNotification('没有可下载的条码', true);
                    return;
                }
                
                const format = batchDownloadFormat.value;
                
                // 创建ZIP文件（这里简化为逐个下载）
                batchBarcodes.forEach((barcode, index) => {
                    setTimeout(() => {
                        try {
                            if (format === 'svg') {
                                // SVG格式下载
                                const svgData = new XMLSerializer().serializeToString(barcode.svg);
                                const blob = new Blob([svgData], { type: 'image/svg+xml' });
                                const url = URL.createObjectURL(blob);
                                
                                const link = document.createElement('a');
                                link.download = `barcode_${barcode.text}_${index + 1}.svg`;
                                link.href = url;
                                link.click();
                                
                                URL.revokeObjectURL(url);
                            } else if (format === 'png') {
                                // PNG格式下载
                                const svgData = new XMLSerializer().serializeToString(barcode.svg);
                                const canvas = document.createElement('canvas');
                                const ctx = canvas.getContext('2d');
                                const img = new Image();
                                
                                img.onload = function() {
                                    canvas.width = img.width;
                                    canvas.height = img.height;
                                    ctx.drawImage(img, 0, 0);
                                    
                                    canvas.toBlob(function(blob) {
                                        const url = URL.createObjectURL(blob);
                                        const link = document.createElement('a');
                                        link.download = `barcode_${barcode.text}_${index + 1}.png`;
                                        link.href = url;
                                        link.click();
                                        URL.revokeObjectURL(url);
                                    }, 'image/png');
                                };
                                
                                const svgBlob = new Blob([svgData], { type: 'image/svg+xml' });
                                const svgUrl = URL.createObjectURL(svgBlob);
                                img.src = svgUrl;
                            }
                        } catch (error) {
                            console.error('下载失败:', error);
                        }
                    }, index * 200); // 延迟下载避免浏览器阻止
                });
                
                showNotification(`开始下载 ${batchBarcodes.length} 个${format.toUpperCase()}格式条码文件...`);
            });
            
            // 监听输入变化
            barcodeText.addEventListener('input', generateBarcode);
            barcodeType.addEventListener('change', generateBarcode);
            fontFamily.addEventListener('change', generateBarcode);
            barcodeColor.addEventListener('change', generateBarcode);
            backgroundColor.addEventListener('change', generateBarcode);

            
            // 初始化生成条码
            generateBarcode();
        });
    </script>
</body>
</html>